<template>
	<view class="item">
		<view class="label" v-for="(activity, index) in list" :key="index">
			<view class="dot">
				<view style="background: #ff774e"></view>
				<text>{{ activity.nodeName }}</text>
				<span class="approveType">{{ activity.nodeDesc }} {{ activity.approveType }}</span>
			</view>
			<view class="add_man">
				<v-user :message="activity.user"></v-user>
				<template v-if="activity.users">
					<v-user :message="item" v-for="item in activity.users" :key="item.id"></v-user>
				</template>
				<template v-if="activity.userGroup">
					<template v-for="item in activity.userGroup">
						<v-user :message="items" v-for="(items, indexs) in item" :key="items.id"></v-user>
					</template>
				</template>
				<template v-if="activity.approveAppointVar">
					<v-auditer multiple v-model="formData[activity.approveAppointVar]" v-if="['指定多个审批人'].includes(activity.nodeDesc)" @on-confirm="auditerConfirm"></v-auditer>
					<v-auditer v-model="formData[activity.approveAppointVar]" v-if="['指定一个审批人'].includes(activity.nodeDesc)" @on-confirm="auditerConfirm"></v-auditer>
				</template>
				<template v-else>
					<v-auditer multiple v-model="formData[activity.nodeId]" v-if="activity.nodeTypeName == 'CS' && !readonly" @on-confirm="auditerConfirm"></v-auditer>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
import VUser from "./user.vue"
import VAuditer from "./auditer.vue"

export default {
	name: "allParticipants",
	model: {
		prop: "value",
		event: "update:value",
	},
	props: {
		list: {
			type: Array,
			default: () => [],
		},
		value: {},
		readonly: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			formData: {},
		}
	},
	computed: {},
	methods: {
		auditerConfirm(returnValue, checkList) {
			this.$emit("allParticipantsConfirm", returnValue, checkList)
		},
	},
	watch: {
		list(data) {
			data.forEach(item => {
				if (item.approveAppointVar) {
					const user = []
					if (item.user) {
						if (item.user.id > 0) {
							user.push(item.user)
						}
					} else if (item.users) {
						item.users.forEach(item => {
							if (item.id > 0) {
								user.push(item)
							}
						})
					}
					this.$set(
						this.formData,
						item.approveAppointVar,
						user.map(item => item.id),
					)
				}
			})
		},
	},
	watch: {
		formData: {
			handler(value) {
				const formData = {}
				Object.keys(value).map(key => {
					formData[key] = value[key].join() + ","
				})
				this.$emit("update:value", formData)
			},
			deep: true,
		},
		value: {
			handler(value) {
				Object.keys(value).forEach(key => {
					if (this.formData[key]) {
						if (value[key] === this.formData[key].join() || value[key] === this.formData[key].join() + ",") {
							return
						}
					}
					this.formData[key] = value[key].split(",").filter(item => item)
				})
			},
			deep: true,
		},
	},
	components: {
		VUser,
		VAuditer,
	},
}
</script>

<style lang="scss" scoped>
.item {
	width: 100%;
	margin-top: 21rpx;
	padding-bottom: 40rpx;
	background-color: #fff;
	border-radius: 15rpx;

	.label {
		width: 100%;
		// background-color: #fff;
		position: relative;
		display: block;
		height: auto;
		padding: 35rpx 59rpx 0 68rpx;

		&.on {
			display: block;
			height: auto;
			padding: 40rpx 59rpx 40rpx 84rpx;
		}

		.add_man {
			overflow: hidden;
			display: flex;
			flex-wrap: wrap;

			.addbtn {
				width: 92rpx;
				margin-top: 24rpx;
				margin-right: 21rpx;
			}

			.labs {
				overflow: hidden;
				display: inline-flex;
				align-items: center;
				background-color: #f2f4f3;
				border-radius: 10rpx;
				margin-top: 24rpx;
				height: 92rpx;
				margin-right: 21rpx;
				padding: 0 12rpx;

				.p {
					width: 67rpx;
					border-radius: 10rpx;
					margin-right: 12rpx;
				}

				text {
					font-size: 29.17rpx;
					color: #444444;
				}

				.c {
					width: 15rpx;
					margin-left: 26rpx;
				}
			}
		}

		.add {
			display: block;
			font-size: 29.17rpx;
			color: #4776ff;
			text-align: center;
		}

		.list {
			overflow: hidden;
			margin-bottom: 43rpx;

			.labdata {
				width: 100%;
				display: flex;
				align-items: center;
				margin-top: 24rpx;
				justify-content: space-between;

				& > image {
					width: 25rpx;
				}

				.icon {
					display: flex;
					align-items: center;

					image {
						width: 70rpx;
					}

					view {
						overflow: hidden;
						margin-left: 19rpx;

						.f {
							display: block;
							font-size: 29.17rpx;
							color: #000000;
							font-weight: bold;
							margin-bottom: 7rpx;
						}

						.des {
							display: block;
							font-size: 23.62rpx;
							color: #999999;
						}
					}
				}
			}
		}

		textarea {
			width: 100%;
			height: 168rpx;
			font-size: 29.17rpx;
			color: #333;
			letter-spacing: 1rpx;
			padding: 24rpx 0;
		}

		.change {
			width: 75%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			font-size: 12px;

			image {
				width: 23rpx;
			}

			input {
				width: calc(100% - 23rpx);
				height: 100%;
				padding-right: 15rpx;
				font-size: 29.17rpx;
				color: #333333;
				text-align: right;
			}

			.s {
				color: #999999;
			}
		}

		.dot {
			display: flex;
			align-items: center;
			position: relative;
			.approveType {
				font-size: 28rpx;
				margin-left: 8rpx;
				color: #999999;
			}

			view {
				width: 15rpx;
				height: 15rpx;
				border-radius: 50%;
				position: absolute;
				left: -36rpx;
				top: 50%;
				background-color: #ff3a30;
				transform: translateY(-50%);
			}

			text {
				font-size: 29.17rpx;
				color: #000000;
				font-weight: bold;
			}
		}
	}
}
</style>
